<template>
	<!-- S 扫码交易 -->
	<view>
		<uni-nav-bar backgroundColor="transparent" :statusBar="true" :border="false" :fixed="true" color="#fff"
			left-icon="back" @clickLeft="$tab.back()" title="扫码交易">
		</uni-nav-bar>

		<view class="box-1">

		</view>

		<view class="box-2 relative" v-if="user">
			<image :src="user.avatar" class="image-1 round" mode=""></image>

			<view class="text-32 text-center">
				{{user.nickName}}
			</view>

			<view class="box-3 flex items-center justify-around">
				<image :src="user.exchangeQrCode" class="image-2" mode=""></image>
			</view>

			<view class="box-4 text-32 text-center">
				用户收款码
			</view>
		</view>

		<view class="box-5 flex align-center justify-around" @click="scanTran">
			<view class="flex items-center">
				<!-- #ifdef APP-PLUS || H5 -->
				<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/mine/icon_saoyisao.png" class="image-3" mode="" />
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/mine/icon_saoyisao.png" class="image-3" mode="" />
				<!-- #endif -->
				<view class="text-28 text-FFF ml-16">
					扫一扫付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: this.$store.getters.userInfo,
				result: '',
			};
		},
		methods: {
			scanTran() {
				uni.scanCode({
					autoZoom:false,
					success: (res) => {
						if (res.result) {
							let str = res.result
							var character = str.indexOf(",")
							let phone = str.substring(0, character);
							let type = str.substring(character + 1, str.length);
							if (type == 1) {
								this.$tab.navigateTo(`/pages/mine/scanTransaction/deal?phone=${phone}`)
							} else {
								this.$tab.navigateTo(`/pages/mine/business/deal?phone=${phone}`)
							}
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.pop {
		width: 600rpx;
		padding: 20rpx;

		.but {
			margin: 40rpx 0;
			background-color: #FA554E;
			color: #fff;
			border-radius: 20rpx;
		}
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.box-1 {
		height: 436rpx;
		background: linear-gradient(180deg, #FA554E 73%, #FFFFFF 100%);
	}

	.box-2 {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(153, 153, 153, 0.16);
		border-radius: 16rpx;
		position: relative;
		left: 20rpx;
		top: -118rpx;
		padding: 112rpx 55rpx 56rpx;

		.image-1 {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			left: calc(50% - 80rpx);
			top: -80rpx;
		}

		.box-3 {
			width: 600rpx;
			height: 600rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/preImages/mine/erweimakuang.png');
			background-size: 100% 100%;
			margin-top: 68rpx;
			.image-2 {
				width: 480rpx;
				height: 480rpx;
			}
		}

		.box-4 {
			width: 354rpx;
			height: 64rpx;
			background: #FFF8EC;
			border-radius: 8rpx;
			margin: 72rpx auto 0;
			color: #9E9E9E;
			line-height: 64rpx;
		}
	}

	.box-5 {
		width: 600rpx;
		height: 88rpx;
		background: #FA554E;
		border-radius: 12rpx;
		margin: 0rpx auto 0;

		.image-3 {
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>
